<script setup lang="ts">
import UserCardListByTags from '@/components/UserCardListByTags.vue';
import request from '@/utils/axios';
import { onMounted, ref } from 'vue'
import qs from 'qs';
import { showFailToast } from 'vant';
const searchText = ref('')
const friendList = ref([])
const onSearch = async() => {
    const res = await request.get('/friend/searchByAccount', {
        params: {
            searchText: searchText.value,
        },
        paramsSerializer: params => {
            return qs.stringify(params, { indices: false })
        }
    })
    if (res.data) {
        res.data.forEach((user) => {
            if (user.tags && user.tags.length > 0) {
                user.tags = JSON.parse(user.tags)
            }
            user.avatarUrl = "data:image/png;base64," + user.avatarUrl
        })
        friendList.value = res.data
    }
    friendList.value = res.data
}
onMounted(async () => {
    const res = await request.get("/friend/list")
    
    if (res.code == 0) {
        res.data?.forEach((user) => {
            if(user.tags != ""){
                user.tags = user.tags.replace("]","").replace("[","").split(',');
            }
            user.avatarUrl = "data:image/png;base64," + user.avatarUrl
        })
        friendList.value = res.data
    }else {
        showFailToast('好友加载失败!请联系作者')
    }
    
})
</script>
<template>

    <van-search v-model="searchText" placeholder="搜索伙伴" @search="onSearch" />
    <UserCardListByTags v-if="friendList.length > 0" :userList="friendList" title="您的好友" action="聊天" />
    <van-empty description="暂无好友" v-else />

</template>

<style scoped lang='scss'></style>